<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .content {
            background: blue;
            height: 900px;
            display: flex; /** 默认压缩内容 **/
            /* * 项目排列依据 默认沿主轴排列 * */
            /* flex-direction: column;  */
            /*默认不换行，压缩内容*/
            flex-wrap: wrap; 
            /* flex-flow flex-direction和flex-wrap的简写 格式 flex-direction ｜｜ flex-warp 默认值为 row nowrap */
            /* 用来定义项目在主轴上的排列方式，以及对于额外空间的分配方式 */
            /* flex-start  flex-end  center  space-between space-around space-evenly */
            /* justify-content: center; */
            /* 用来定义项目在交叉轴上的排列方式以及额外空间的分配方式 */
            /* stretch flex-start center flex-end flex-between flex-around */
            /* 单行使用align-items 多行使用align-content */
            align-content: space-around;
        }
        .item {
            width: 300px;
            height: 200px;
            background: gray;
            margin-right: 10px;
            margin-bottom: 10px;
        }
        .content .item:last-child {
            /* order 从小到大排列 默认为0 都为0按代码顺序排列 越小越靠前 可以为负数 */
            order: -1;
            flex-grow: 1;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item">di</div>
    </div>
</body>
</html>